<template>
  <div>
    <el-card class="box-card" v-show="showDialog">
      <div slot="header" class="clearfix">
        <span>添加用户</span>
      </div>
      <el-form
        :model="ruleForm"
        status-icon
        ref="ruleForm"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item label="用户名" prop="username">
          <el-input
            type="text"
            v-model="ruleForm.username"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="Pass">
          <el-input
            type="password"
            v-model="ruleForm.Pass"
            autocomplete="off"
          ></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email"></el-input>
        </el-form-item>
        <el-form-item label="手机" prop="mobile">
          <el-input v-model.number="ruleForm.mobile"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="closeDialog"
            >取消</el-button
          >
          <el-button type="primary" @click="bingo">确定</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import request from '@/utils/request'

export default {
  props: ['showDialog'],
  data () {
    return {
      ruleForm: {
        username: '派华',
        Pass: '123123',
        email: '123@qq.com',
        mobile: '13287678987'
      }
    }
  },
  methods: {
    closeDialog () {
      // 触发自定义事件，通知父组件关闭对话框
      this.$emit('close') // 子传父
    },
    bingo () {
      // 获取表单数据
      console.log(this.ruleForm)
      // 发起添加用户请求
      request.post('users', {
        username: this.ruleForm.username,
        password: this.ruleForm.Pass,
        email: this.ruleForm.email,
        mobile: this.ruleForm.mobile
      })
        .then(res => {
          console.log(res)
          const { data } = res
          if (data.meta.status === 201) {
            this.$message.success('添加成功')
            // 页面重新加载
            window.location.reload()
          } else {
            this.$message.warning('添加失败')
          }
        })
        .catch(err => {
          console.log(err)
        })
    }
  }
}
</script>

<style scoped>
.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both;
}

.box-card {
  width: 780px;
  height: 390px;;
  box-shadow: none !important;
  border: 5px solid skyblue;
}

.el-card {
  /* margin-top: -400px; */
  padding-left: 20px;
  padding-right: 20px;
  box-sizing: border-box;
  text-align: left !important;
  position: absolute;
  top: 40px;;

}
.el-input {
  width: 500px;
}
.el-form .el-button:nth-of-type(1){
  float: left;
  margin-left: 460px;;
}
.el-form .el-button:nth-of-type(2){
  float: right;
}
</style>
